import {ScrollView, View, Text, Image} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import {AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction} from 'taro-ui';
import 'taro-ui/dist/style/components/modal.scss';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import closeImg from '@/assets/image/communityService/close.png';
import mainImg from '@/assets/image/communityService/main.png';
import noticeImg from '@/assets/image/communityService/notice.png';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      navBarPadding: 0,
    };
  }

  componentDidMount() {
    this.getNavHeight();
  }

  componentDidShow() {}

  componentWillUnmount() {
    this.props.actions.clean();
  }

  getNavHeight() {
    const menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    let menuBottonHeight = menuButtonObject.height;
    let navBarPadding = menuButtonObject.top;
    let navBarHeight = menuBottonHeight + navBarPadding;
    // const navBarPaddingR = (sysinfo.windowWidth - (menuButtonObject.right - menuButtonObject.width)) * 2
    this.setState({
      navBarHeight,
      navBarPadding: navBarPadding,
      // navBarPaddingR,
    });
  }

  render() {
    let {
      main: {showTips},
      actions: {action},
    } = this.props;
    return (
      <ScrollView className="packageDClothingRecycling" scrollY>
        <View className="header-bg">
          <View
            style={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              paddingTop: `${this.state.navBarPadding}px`,
              height: `${this.state.navBarHeight}px`,
            }}
          >
            <AtIcon
              onClick={() => {
                Taro.navigateBack();
              }}
              customStyle={{zIndex: 2}}
              value="chevron-left"
              size="30"
              color="#000"
            ></AtIcon>
            <View
              style={{
                fontSize: '36rpx',
                fontWeight: 500,
                color: '#333333',
                margin: '0 auto',
                zIndex: 2,
                transform: 'translateX(-36%)',
              }}
            >
              旧衣回收
            </View>
          </View>
          {/* {showTips && (
            <View className="noticeBox">
              <View className="left">
                <Image className="noticeImg" src={noticeImg} mode="widthFix" />
                <Text className="text">下单返利，回收返xxx奖励</Text>
              </View>
              <Image
                className="closeImg"
                src={closeImg}
                mode="widthFix"
                onClick={(e) => {
                  e.stopPropagation();
                  action.commonChange('main.showTips', false);
                }}
              />
            </View>
          )} */}
        </View>
        <View className="main">
          <Text className="title">回收上门流程</Text>
          <Image className="mainImg" src={mainImg} mode="widthFix" />
          <View
            className="btn"
            onClick={(e) => {
              e.stopPropagation();
              Taro.navigateTo({
                url: '/pages/package-D/clothingReservation/index?type=add',
              });
            }}
          >
            快速预约
          </View>
        </View>
        <View className="main">
          <Text className="title" style={{marginBottom: '30px'}}>
            回收须知
          </Text>
          <Text className="desc">1、订单确认后，修改订单或退款需提前2小时通知</Text>
          <Text className="desc">2、预约完成后半个小时内，快递员会在半小时内联系用户确认时间</Text>
          <Text className="desc">
            3、此服务由白鲸鱼上门回收提供，所有的费用均为白鲸鱼承担，您无需承担任何费用，如遇到收取费及时拨打我们的客服电话
          </Text>
        </View>
      </ScrollView>
    );
  }
}
